<template>
<div class="app-container">
  <el-row :gutter="20" class="pb ">
    <el-col :span="6">
      <el-card shadow="hover" class="bgblue">
        <el-row>
          <el-col :span="14">
            <p>本月故障总数据</p>
            <h1>{{fault_record_num2}}条</h1>
          </el-col>
          <el-col :span="10">
            <img src="@/assets/images/zhexian.png" style="width: 100%; height: 100%; object-fit:cover;">
          </el-col>
        </el-row>
        <div style="display: flex;justify-content: space-between;">
          <span>同比上月
            <el-button v-if="flag == 1" type="danger" icon="el-icon-top" circle size="mini" style="margin: 2px;"></el-button>
            <el-button v-if="flag == 2" icon="el-icon-bottom" circle size="mini" style="margin: 2px;"></el-button>
            {{fault_record_cha_num}}条
          </span>
          <el-button type="text" @click="JumpFaultRecord"> > </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="14">
            <p>故障检测总数据</p>
            <h1>{{fault_record_num}}条</h1>
          </el-col>
          <el-col :span="10">
            <img src="@/assets/images/zhuzhuang.png" style="width: 100%; height: 100%; object-fit:cover;">
          </el-col>
        </el-row>
        <div style="display: flex;justify-content: space-between;">
          <span>自从上月以来<el-button type="primary" icon="el-icon-top" circle size="mini" style="margin: 2px;"></el-button>{{fault_record_num2}}</span>
          <el-button type="text" @click="JumpFaultRecord"> > </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="18">
            <p>监测场站（个）</p>
            <h1>{{ changzhan_num }}</h1>
          </el-col>
          <el-col :span="6">
            <img src="@/assets/images/yonghu.png" class="head_img" style="width: 100%; height: 100%; object-fit:cover;">
          </el-col>
        </el-row>
        <div style="display: flex;justify-content: space-between;">
          <span>自从上月以来<el-button type="primary" icon="el-icon-top" circle size="mini" style="margin: 2px;"></el-button>数量不变</span>
          <el-button type="text" @click="JumpChangzhan"> > </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-row>
          <el-col :span="18">
            <p>监测部件（个）</p>
            <h1>{{ fengji_num }}</h1>
          </el-col>
          <el-col :span="6">
            <img src="@/assets/images/bianji.png" class="head_img" style="width: 100%; height: 100%; object-fit:cover;" >
          </el-col>
        </el-row>
        <div style="display: flex;justify-content: space-between;">
          <span>自从上月以来<el-button type="primary" icon="el-icon-top" circle size="mini" style="margin: 2px;"></el-button>数量不变</span>
          <el-button type="text" @click="JumpFengji"> > </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="20" class="pb ">
    <el-col :span="18">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>故障数据统计</span>
          <div style="float: right;">
            <!--
            <el-select v-model="yearValue" multiple placeholder="请选择年份" >
              <el-option
                v-for="item in yearList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            -->
          </div>

        </div>
        <div>
          <div ref="brokenlinechart" style="width:100%;height:380px"></div>
        </div>
      </el-card>

    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>风机故障原因</span>
          <!--
            <span style="float: right; padding:0; margin: 0;">前<el-input-number v-model="pienum" @change="piechartChange" :min="1" :max="10" size="mini" label="描述文字"></el-input-number>名</span>
          -->
        </div>
        <div>
          <div ref="piechart" style="width:100%;height:380px"></div>
        </div>
      </el-card>

    </el-col>
  </el-row>

  <el-row :gutter="20" class="pb ">
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>故障部件排名</span>
          <!--
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
           -->
        </div>
        <div class="text item">
          <el-table v-loading="loading" :data="partsRankList">
            <el-table-column label="排名" align="center" prop="id" width="80px"/>
            <el-table-column label="场站" align="center" prop="czname"  width="160px"/>
            <el-table-column label="部件" align="center" prop="bjname" />
            <el-table-column label="故障次数" align="center" prop="faultnum" />
            <el-table-column label="近期故障时间" align="center" prop="riqi" width="160px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.riqi, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

    </el-col>
    <el-col :span="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>故障原因排名</span>
          <!--
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
           -->
        </div>
        <div class="text item">
          <el-table v-loading="loading" :data="contentRankList">
            <el-table-column label="排名" align="center" prop="id" width="100px"/>
            <el-table-column label="故障原因" align="center" prop="faultcontent" />
            <el-table-column label="故障次数" align="center" prop="faultnum" width="100px" />
            <el-table-column label="近期故障时间" align="center" prop="riqi" width="200px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.riqi, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>

<!--
  <el-row :gutter="20" class="pb ">
    <el-col :span="18">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>故障统计</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div>
          <div ref="chart" style="width:100%;height:380px"></div>
        </div>
      </el-card>

    </el-col>
    <el-col :span="6">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>搜索</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item" style="width:100%;height:380px">
          <span>卡片内容</span>
          <span>卡片内容</span>
          <span>卡片内容</span>
        </div>
      </el-card>
    </el-col>
  </el-row>


  <el-card :span="24" class="card-box">
    这里放各种图表
    <div>
      <div ref="chart1" style="width:100%;height:380px"></div>
    </div>
  </el-card>

  <el-card>
    <el-tabs type="card">
      <el-tab-pane label="本月">本月故障数据</el-tab-pane>
      <el-tab-pane label="本年">本年故障数据</el-tab-pane>
    </el-tabs>
  </el-card>

  <el-card>
    选中年份值{{yearValue}}
  </el-card>

-->

</div>

</template>

<script>
import { getChangzhanNum,getFengjiNum,getFaultRecordNum,getFaultRecordNum2,getFaultRecordAddNum,getPartsRankList,getContentRankList,yearBrokenLine } from "@/api/ruoyi-yuce/yxzk";
import request from "@/utils/request";
import {listYcdata} from "@/api/ruoyi-yuce/ycdata";
import data from "@/views/system/dict/data";
export default {
  name: "Yxzk",
  data() {
    return {
      //表格数据加载
      loading: false,
      changzhan_num: null,
      fengji_num: null,
      pienum: 5, //风机故障原因数
      fault_record_num: null,    //所有故障数据
      fault_record_num2: null,   //本月故障数据
      fault_record_cha_num: null,   //故障记录查差
      flag: null, //判断，1为比上月故障多，2为比上月故障少
      partsRankList: [], //部件故障排名
      contentRankList: [],  //参数故障排名
      //选中故障年份
      yearValue:[
        2023
      ], //选中年份值
      yearList:[{   //故障年份列表
        value: '2020',
        label: '2020年'
      },{
        value: '2021',
        label: '2021年'
      },{
        value: '2022',
        label: '2022年'
      },{
        value: '2023',
        label: '2023年'
      }]
    }
  },
  created() {
    this.getChangzhanNum()
    this.getFengjiNum()
    this.getFaultRecordNum()
    this.getRankingList()
  },
  mounted() {
    this.getEchartData();
    this.getEchartData1();
    this.getBrokenLine();
    this.getPieChartData();
  },
  methods: {
    // 柱状图
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          legend: {},
          grid: {
            top: '4%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          tooltip: {},
          dataset: {
            source: [
              ['订单', 43.3, 85.8],
              ['订单1', 83.1, 73.4],
              ['订单2', 86.4, 65.2],
              ['订单3', 72.4, 53.9],
              ['订单4', 82.4, 53.9],
              ['订单5', 42.4, 53.9],
              ['订单6', 72.4, 53.9],
              ['订单7', 72.4, 53.9]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {},

          series: [{type: 'bar'}, {type: 'bar'}]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    // 故障记录折线图
    getBrokenLine() {
      const chart = this.$refs.brokenlinechart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 'bottom',  //每个模块名所在位置
            left: 'center'  //文字居中
          },
          grid: {
            top: '6%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel:{
              margin: 20  // x轴文字距离x轴的距离
            }
          },
          yAxis: {
            type: 'value'
          },
          series: []
        }
        request.get("ruoyi-yuce/yxzk/getBrokenLine").then(res =>{

          option.xAxis.data=res.data.xAxis;
          for (const key in res.data.series) {
            const series1 = {
              name: res.data.series[key].name,
              type: "line",
              data: res.data.series[key].data
            };
            option.series.push(series1);
          }
          /**
          option.series[0].data=res.data.series[0].data;
          option.series[0].name=res.data.series[0].name;
          option.series[0].type='line';
          option.series[1].data=res.data.series[1].data;
          option.series[1].name=res.data.series[1].name;
          option.series[1].type='line';
          option.series[2].data=res.data.series[2].data;
          option.series[2].name=res.data.series[2].name;
          option.series[2].type='line';
          option.series[3].data=res.data.series[3].data;
          option.series[3].name=res.data.series[3].name;
          option.series[3].type='line';
          */
          myChart.setOption(option);
        })
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    // 折线图
    getEchartData1() {
      const chart1 = this.$refs.chart1
      if (chart1) {
        const myChart = this.$echarts.init(chart1)
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            top: 'bottom',  //每个模块名所在位置
            left: 'center'  //文字居中
          },

          grid: {
            top: '4%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0h','1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10', '11h', '12h', '13h', '14h', '15h', '16h', '17h', '18h', '19h', '20', '21h', '22h', '23h'],
            axisLabel:{
              margin: 20  // x轴文字距离x轴的距离
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Email',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134]
            },
            {
              name: 'Union Ads',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330,220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
            },
            {
              name: 'Video Ads',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330,320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334]
            },
            {
              name: 'Direct',
              type: 'line',
              stack: 'Total',
              data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330,820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934]
            },
            {
              name: 'Search Engine',
              type: 'line',
              stack: 'Total',
              data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330,150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154]
            }
          ]

        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    // 饼图
    getPieChartData() {
      const piechart = this.$refs.piechart
      if (piechart) {
        const myChart = this.$echarts.init(piechart)
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom',  //每个模块名所在位置
            left: 'center'  //文字居中
          },
          series: [
            {
              name: '风机故障原因',
              type: 'pie',
              center: ['50%','40%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 30,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:[]
            }
          ]
        }
        request.get("ruoyi-yuce/yxzk/getPieChart").then(res =>{
          console.log('pieChart',res)
          console.log('data0',res.data.series[0].name)
          const data1 = []
          for (const key in res.data.series) {
            data1.push({
              value: res.data.series[key].value,
              name: res.data.series[key].name
            })
          }
          console.log('data1',data1)
          option.series[0].data = data1
          myChart.setOption(option);
        })
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    piechartChange(){
      this.getPieChartData()
    },
    getChangzhanNum() {
      getChangzhanNum().then(response => {
        console.log('场站数', response)
        this.changzhan_num = response
      })
    },
    getFengjiNum() {
      getFengjiNum().then(response => {
        console.log('风机数', response)
        this.fengji_num = response
      })
    },
    getFaultRecordNum() {
      const num = null;
      getFaultRecordNum().then(response => {
        console.log('故障总数', response)
        this.fault_record_num = response
      }),
        getFaultRecordNum2().then(response => {
          console.log('本月故障数', response)
          this.fault_record_num2 = response
          this.num = response
        }),
        getFaultRecordAddNum().then(response => {
          console.log('同比上月差距', response)
          this.flag = response.flag;
          this.fault_record_cha_num = response.param;
          console.log(response.flag, response.param);
        })
    },
    getRankingList(){
      this.loading = true;
      getPartsRankList().then(response => {
        this.partsRankList = response.rows;
      }),
      getContentRankList().then(response => {
        this.contentRankList = response.rows;
        this.loading = false;
      })
    },
    JumpChangzhan() {
      this.$router.push('/yuce/changzhan');
    },
    JumpFengji() {
      this.$router.push('/yuce/fengji');
    },
    JumpFaultRecord() {
      this.$router.push('/history/faultrecord');
    },
    changeYear(){
      yearBrokenLine(this.yearValue).then(response => {
        this.$modal.msgSuccess("提交成功");
      });
    },
  }
}
</script>

<style scoped>
.pb{
  margin-bottom: 20px;
}
.bgblue{
  color: white;
  background-color: #0052D9;
}
.head_img{
  margin-top: 5px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}



</style>
